<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科技成都</title>
    <link rel="stylesheet" type="text/css" href="css/science.css">
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
</head>
<body>
<div class="container">
    <div class="head_img">
        <img src="image/science/aaa.gif">
    </div>

    <div class="box">
        <div class="title">
            <a>走进中试平台</a>
        </div>
        <!-- Swiper 容器 -->
        <div class="swiper-container">
            <div class="swiper-button-prev swiper-button-white"></div> <!-- 左切换按钮 -->
            <div class="swiper-button-next swiper-button-white"></div> <!-- 右切换按钮 -->
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper">
                        <img class="img" src="image/science/swiper1.jpg">
                        <div class="sign">
                            <a>
                                1.聚集中式平台聚集中式平台聚集中式平台聚集中式平台
                            </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper">
                        <img class="img" src="image/science/swiper2.jpg">
                        <div class="sign">
                            <a>
                                2.聚集中式平台聚集中式平台聚集中式平台聚集中式平台
                            </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper">
                        <img class="img" src="image/science/swiper3.jpg">
                        <div class="sign">
                            <a>
                                3.聚集中式平台聚集中式平台聚集中式平台聚集中式平台
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <div class="box">
        <div class="title">
            <a>从“实验室”到“大市场”</a>
        </div>
        <div class="content">
            <div class="img_left">
                <img class="img" src="image/science/swiper.jpg">
            </div>
            <div class="sign_right">
                <a data-img-src="image/swiper.jpg" class="default-active">1.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                <a data-img-src="image/swiper2.jpg">2.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                <a data-img-src="image/swiper3.jpg">3.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                <a data-img-src="image/swiper4.jpg">4.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
            </div>
        </div>
        <div class="more">
            <a>更多</a>
        </div>
    </div>

    <div class="box">
        <div class="title">
            <a>科技成果“汇”</a>
        </div>
        <div class="content">
            <div class="left_one">
                <img class="img" src="image/science/swiper.jpg">
                <div class="overlay"></div>
                <a>聚焦成果转化案例，形成“成都经验,聚焦成果转化案例，形成“成都经验,聚焦成果转化案例，形成“成都经验,聚焦成果转化案例，形成“成都经验</a>
            </div>
            <div class="right_four">
                <div class="img_box four_img_left">
                    <img class="img" src="image/science/swiper1.jpg">
                    <div class="overlay"></div>
                    <a>聚焦成果转化案例，形成“成都经验</a>
                </div>
                <div class="img_box">
                    <img class="img" src="image/science/swiper2.jpg">
                    <div class="overlay"></div>
                    <a>聚焦成果转化案例，形成“成都经验</a>
                </div>
                <div class="img_box four_img_left">
                    <img class="img_btm" src="image/science/swiper3.jpg">
                    <div class="overlay"></div>
                    <a>聚焦成果转化案例，形成“成都经验</a>
                </div>
                <div class="img_box">
                    <img class="img_btm" src="image/science/swiper4.jpg">
                    <div class="overlay"></div>
                    <a>聚焦成果转化案例，形成“成都经验</a>
                </div>
            </div>
        </div>
        <div class="more">
            <a>更多</a>
        </div>
    </div>

    <div class="box">
        <div class="parent">
            <div class="parent_box">
                <div class="title">
                    <a>技术经纪人TALK</a>
                </div>
                <div class="content ">
                    <a>1.聚集中式平台聚集中式平台聚集中式平台聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                    <a>2.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                    <a>3.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                    <a>4.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                </div>
                <div class="more">
                    <a>更多</a>
                </div>
            </div>
            <div class="parent_box">
                <div class="title">
                    <a>政策直通车</a>
                </div>
                <div class="content content_right">
                    <a>1.聚集中式平台聚集中式平台聚集中式平台聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                    <a>2.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                    <a>3.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                    <a>4.聚集中式平台聚集中式平台聚集中式平台聚集中式平台</a>
                </div>
                <div class="more more_right">
                    <a>更多</a>
                </div>
            </div>
        </div>
    </div>

    <div class="box">
        <div class="title">
            <a>
                成都创新力
            </a>
        </div>
        <div class="kid_show">
            <div class="swiper">
                <img class="img" src="image/science/swiper.jpg">
                <div class="sign">
                    <a>
                        聚集中式平台聚集中式平台聚集中式平台聚集中式平台
                    </a>
                </div>
            </div>
            <div class="swiper">
                <img class="img" src="image/science/swiper.jpg">
                <div class="sign">
                    <a>
                        聚集中式平台聚集中式平台聚集中式平台聚集中式平台
                    </a>
                </div>
            </div>
            <div class="swiper">
                <img class="img" src="image/science/swiper.jpg">
                <div class="sign">
                    <a>
                        聚集中式平台聚集中式平台聚集中式平台聚集中式平台
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 引入 Swiper JS 文件 -->
<script src="node_modules/swiper/dist/js/swiper.js"></script>
<!-- 初始化 Swiper -->
<script>
    // 当 DOM 准备好时，初始化 Swiper
    document.addEventListener('DOMContentLoaded', function () {
        var mySwiper = new Swiper('.swiper-container', {
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            // 配置 Swiper 参数
            loop: true,
            pagination: false,
            paginationClickable: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false,
            effect: 'fade',
        });
    });

    // 获取所有的链接
    const links = document.querySelectorAll('.sign_right a');

    // 设置默认激活第一个链接
    const defaultLink = links[0];
    defaultLink.classList.add('default-active');
    defaultLink.style.color = 'white'; // 确保默认激活链接的文字颜色为白色

    // 为每个链接添加 hover、focus 和 click 事件监听器
    links.forEach(link => {
        link.addEventListener('mouseenter', function() {
            // 移除其他链接的激活状态并恢复颜色
            links.forEach(l => {
                if (l !== this) {
                    l.classList.remove('default-active');
                    l.style.color = ''; // 恢复默认文字颜色
                }
            });
            // 为当前链接添加激活状态并设置颜色
            this.classList.add('default-active');
            this.style.color = 'white';
        });

        link.addEventListener('mouseleave', function() {
            // 如果鼠标离开的不是默认激活链接，则恢复默认颜色
            if (!this.classList.contains('default-active')) {
                this.style.color = '';
            }
        });

        link.addEventListener('focus', function() {
            // 移除其他链接的激活状态并恢复颜色
            links.forEach(l => {
                if (l !== this) {
                    l.classList.remove('default-active');
                    l.style.color = ''; // 恢复默认文字颜色
                }
            });
            // 为当前链接添加激活状态并设置颜色
            this.classList.add('default-active');
            this.style.color = 'white';
        });

        link.addEventListener('blur', function() {
            // 如果失去焦点的不是默认激活链接，则恢复默认颜色
            if (!this.classList.contains('default-active')) {
                this.style.color = '';
            }
        });

        link.addEventListener('click', function() {
            // 点击时，只保持当前链接的激活状态
            links.forEach(l => {
                if (l !== this) {
                    l.classList.remove('default-active');
                    l.style.color = ''; // 恢复默认文字颜色
                }
            });
            this.classList.add('default-active');
            this.style.color = 'white';
        });
    });
</script>

</body>
</html>
